<!DOCTYPE html>
<html lang="en">
<head>
    <link href="demo.css" rel="stylesheet">
    <meta charset="UTF-8">
    <title>Animation</title>
</head>
<body>
<div id="demo">

    Push this button to do something you shouldn't be doing:<br/>
    <div :class="{ shake: noActivated }">
        <button @click="noActivated = !noActivated">点击</button>
        <span v-if="noActivated">oh no</span>
    </div>
    <p>------------------</p>

    <div @mousemove="xCoorinate" class="movearea" :style="{ backgroundColor: `hsl(${x}, 80%, 50%)` }">
        <h3>Move your mouse across the screen...</h3>
        <p>x: {{x}}</p>
    </div>
    <p>------------------</p>
    <button @click="show = !show">toggle</button>
    <transition name="fade">
        <p v-if="show">hellp</p>
    </transition>
    <p>------------------</p>
    <button @click="add">Add</button>
    <button @click="remove">Remove</button>
    <transition-group name="list" tag="p">
        <li v-for="item in bookList"  :key="item">
            {{item}}
        </li>
    </transition-group>

    <span style="color: #999999">开通前请阅读 </span><span style="color: #308ce8">《连续订阅服务协议》</span>



</div>

<script src="../vue.global.js"></script>
<script>
    const App = Vue.createApp({
        data() {
            return {
                msg: "msg",
                noActivated: false,
                x: 0,
                show: false,
                nextNum: 10,
                bookList: ["a","b","c","d","e","f"]
            }
        },
        methods: {
            xCoorinate(e) {
                this.x = e.clientX
            },
            randomIndex() {
                return Math.floor(Math.random() * this.bookList.length)
            },
            add() {
                this.bookList.splice(this.randomIndex(), 0, this.nextNum++)
            },
            remove() {
                this.bookList.splice(this.randomIndex(), 1)
            }
        },

    });
    App.mount("#demo")

</script>
</body>
</html>